<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: components/timeline/timelineItem.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: components/timeline/timelineItem.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
&lt;div class="timepoint" :class="{'timepoint-primary':primary,'timepoint-secondary':!primary}">
  &lt;div class="timepoint-date">
    &lt;div class="timepoint-date-date">{{date}}&lt;/div>
    &lt;div class="timepoint-date-month">{{month}}&lt;/div>
  &lt;/div>
  &lt;i class="timepoint-i">&lt;slot name="icon">&lt;/slot>&lt;/i>
  &lt;div class="timepoint-content" v-if="!primary">
    &lt;slot>&lt;/slot>
  &lt;/div>
&lt;/div>
&lt;/template>

&lt;script>
/**
 * 时间线子模块
 * @module components/timeline/timelineItem
 * @param {String|Number} date 显示的日期
 * @param {Boolean} primary=false 是否是年份节点
 * @param {String|Number} month 月份节点显示的月份
 * @example
 * &lt;timeline>
    &lt;timeline-item class='timepoint-empty' :date="'24'" :month="'五月'">
        &lt;span slot="icon">空&lt;/span>
        &lt;i class="icon_family">&lt;/i>
        &lt;div>噢哦~今天还没有记录大事件哦！&lt;/div>
    &lt;/timeline-item>
    &lt;timeline-item :primary="true" :date="'2017年'">&lt;/timeline-item>
    &lt;timeline-item :date="'11'" :month="'四月'" :class="'record'+dateFormat(item.start,'yyyyMMdd')">
      &lt;div class="record-title">{{item.title}}&lt;/div>
      &lt;div class="record-subtitle">{{dateFormat(item.start,'yyyy-MM-dd')}}&lt;/div>
      &lt;div class="record-content">{{item.content}}&lt;/div>
    &lt;/timeline-item>
  &lt;/timeline>

  slots：
    default 时间线内容
 */
  export default {
 		name: 'timeline-item',
    data:function() {
      return {
      }
    },
    props:{
      primary: {
        type: Boolean,
        default: false
      },
      month: {
        type: [String,Number]
      },
      date: {
        type: [String,Number]
      }
    }
  }
&lt;/script>

&lt;style>
.timepoint {  position: relative;  margin: 0px; line-height:22px;font-size: 13px;min-height: 48px;} 
.timepoint+.timepoint{  margin-top: 24px;} 
.timepoint-primary+.timepoint-secondary{margin-top: 10px;}
.timepoint-i{display: inline-block;position: absolute;top: 0px;left: 0px;width:22px;height: 22px;border-radius:50%;box-shadow: 1px 1px 2px 2px rgba(150,150,150,.3)}
.timepoint-primary .timepoint-i{background: url('./icon_time.png') no-repeat center center;background-size:100%; background-color:#50aceb;margin-left: 4px;margin-top: 2px;}
.timepoint-secondary .timepoint-i{width:30px;height:30px;background: url('./icon_timepoint.png') no-repeat center center;background-size:69%;background-color:#f6f6f6}
.timepoint-date{position: absolute;right: 100%;top: 0px;margin-right: 10px;width: 44px;text-align: right;}
.timepoint-primary .timepoint-date{color: #000;font-size: 16px;}
.timepoint-secondary .timepoint-date{color: #494949;font-size: 18px;}
.timepoint-date-month{color:#494949;font-size: 14px;}
.timepoint-content{margin-left:46px;color:#444;padding: 4px 4px 4px 8px;min-height: 26px; line-height: 20px;background-color: #f8faff;border: 1px solid #d0d0d0;position: relative;font-size: 12px}
.timepoint-content:before{content: '';display: block;position: absolute; top: 10px;right: 100%;border-right:8px solid #d0d0d0; border-bottom:5px solid transparent; border-top:5px solid transparent; }
.timepoint-content:after{content: '';display: block;position: absolute; top: 11px;right: 100%;border-right:7px solid #f8faff; border-bottom:4px solid transparent; border-top:4px solid transparent; }

&lt;/style>
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-components_appCalendar.html">components/appCalendar</a></li><li><a href="module-components_appLoading.html">components/appLoading</a></li><li><a href="module-components_appUserBox.html">components/appUserBox</a></li><li><a href="module-components_editImage.html">components/editImage</a></li><li><a href="module-components_fileList.html">components/fileList</a></li><li><a href="module-components_menuNava_menuNava.html">components/menuNava/menuNava</a></li><li><a href="module-components_menuNava_menuNavaItem.html">components/menuNava/menuNavaItem</a></li><li><a href="module-components_myInputPage.html">components/myInputPage</a></li><li><a href="module-components_mySelectPage.html">components/mySelectPage</a></li><li><a href="module-components_myWebuploader.html">components/myWebuploader</a></li><li><a href="module-components_textImgBox.html">components/textImgBox</a></li><li><a href="module-components_timeline_timeline.html">components/timeline/timeline</a></li><li><a href="module-components_timeline_timelineItem.html">components/timeline/timelineItem</a></li><li><a href="module-components_vImg.html">components/vImg</a></li><li><a href="module-scripts_common.html">scripts/common</a></li><li><a href="module-scripts_configValid.html">scripts/configValid</a></li><li><a href="module-scripts_LunarCalendar.html">scripts/LunarCalendar</a></li><li><a href="module-scripts_vueMethods.html">scripts/vueMethods</a></li><li><a href="module-services.html">services</a></li><li><a href="module-services_AnniversaryService.html">services/AnniversaryService</a></li><li><a href="module-services_ArchiveService.html">services/ArchiveService</a></li><li><a href="module-services_BigEventService.html">services/BigEventService</a></li><li><a href="module-services_FamilyService.html">services/FamilyService</a></li><li><a href="module-services_UserService.html">services/UserService</a></li><li><a href="module-vuex-history.html">vuex-history</a></li><li><a href="module-vuex-loading.html">vuex-loading</a></li><li><a href="module-vuex-toast.html">vuex-toast</a></li></ul><h3>Namespaces</h3><ul><li><a href="Vue.html">Vue</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a> on Fri Jun 30 2017 09:20:36 GMT+0800 (中国标准时间)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
